<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>节奏练习页面</title>

    <style>
        #keyboard {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 300px;
            width: 800px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .key {
            width: 30px;
            height: 150px;
            border: 1px solid #ddd;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

        #score {
            width: 800px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="keyboard">
        <!-- Keyboard keys will be dynamically added here -->
    </div>
    <div id="score"></div>
    <script src="./js/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/abcjs/6.2.2/abcjs-basic-min.js"></script>
    <script>
        // Initialize ABCJS with your sheet music
        ABCJS.renderAbc("X:1\nK:C\nC4 D4 E4 F4", document.getElementById("score"));

        // Create 88 keys on the keyboard
        let currentKey = 0;
        let keysPlayed = [];
        let sheetMusic = ["C", "D", "E", "F", "G", "A", "B"]; // This would be your sheet music notes in order

        for (let i = 0; i < 88; i++) {
            let keyElement = $("<div class='key' data-note='" + sheetMusic[i % sheetMusic.length] + "'>" + String.fromCharCode(65 + (i % 26)) + "</div>");
            $("#keyboard").append(keyElement);

            keyElement.on("click", function () {
                let note = $(this).data("note");
                keysPlayed.push(note);
                checkAccuracy();
                updateDisplay();
            });
        }

        // Function to check accuracy of played keys vs sheet music
        function checkAccuracy() {
            let isCorrect = keysPlayed.every((playedNote, index) => playedNote === sheetMusic[index]);
            console.log("Is accurate: ", isCorrect);
            // You can add more logic here, like showing a message or updating a score
        }

        // Function to update the display of current key
        function updateDisplay() {
            let currentKeyElement = $("#keyboard .key").eq(currentKey);
            currentKeyElement.addClass("active");

            setTimeout(() => {
                currentKeyElement.removeClass("active");
                currentKey = (currentKey + 1) % 88;
            }, 500); // Adjust the timeout to your desired key press interval
        }

        // Start the updateDisplay loop
        setInterval(updateDisplay, 500); // Adjust the interval to your desired refresh rate
    </script>
</body>

</html>